<template>
  <div class="main-wrap" style="padding-bottom: 50px">
    <transition name="van-fade">
      <keep-alive :max="8">
        <router-view v-show="visible"></router-view>
      </keep-alive>
    </transition>
    <copyright />
    <van-tabbar v-model="active" @click="change">
      <van-tabbar-item :to="{ path: '/' }" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item :to="{ path: '/integral' }" icon="search"
        >积分商城</van-tabbar-item
      >
      <van-tabbar-item :to="{ path: '/cart' }" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item :to="{ path: '/store' }" icon="shop-o"
        >合作门店</van-tabbar-item
      >
      <van-tabbar-item :to="{ path: '/mine' }" icon="setting-o"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { Auth } from "@/api/login";
export default {
  name: "Main",
  data() {
    return {
      active: null,
      visible: true
    };
  },
  watch: {
    $route(to, from) {
      console.log(to);
      console.log(from);
    }
  },
  created() {
    this.login();
  },
  methods: {
    login() {
      Auth().then(res => {
        console.log(res);
      });
    },
    change() {
      this.visible = false;
      setTimeout(() => {
        this.visible = true;
      }, 4000);
    }
  }
};
</script>
